<template>
<div class="dt-cart-item">
  <div class="dt-cart-item-list">
    <div class="dt-Cart" v-for="shop in cart" :key="shop.id">
      <van-checkbox v-model="shop.check" @click="toggleItemCheck()"></van-checkbox>
        <van-card
          :num="shop.count"
          :price="shop.price"
          desc="描述信息"
          :title="shop.title"
          :thumb="shop.image"
        >
          <template #tags>
            <van-tag plain type="danger">{{shop.id}}</van-tag>
            <van-tag plain type="danger">标签2</van-tag>
          </template>
          <template #footer>
            <span class="delete-prod" @click="deleteProd(shop.id)">删除</span>
            <van-button
            size="mini"
            @click="reduceCount(shop.id)">-</van-button>
            <van-button @click="addCount(shop.id)" size="mini">+</van-button>
          </template>
      </van-card>
    </div>
    <div class="test"></div>
  </div>
  <van-submit-bar :price="totalMoney" button-text="提交订单">
  <van-checkbox :value="isAllCheck" @click="toggleAllCheck()">全选</van-checkbox>
  <template #tip>
      你的收货地址不支持同城送, <span>修改地址</span>
    </template>
  </van-submit-bar>
</div>
</template>

<script>
//  由于我们的vuex已经分组件管理，所以在导入帮助函数的时候要用到createNamespacedHelpers
import { createNamespacedHelpers } from 'vuex'
//  获取到组件
const cart = createNamespacedHelpers('cart')
export default {
  name: 'dtcart',
  computed: {
    ...cart.mapState(['cart']),
    ...cart.mapGetters(['totalMoney', 'isAllCheck'])
  },
  methods: {
    ...cart.mapMutations(['addCount',
      'reduceCount',
      'toggleAllCheck',
      'toggleItemCheck',
      'deleteProd'
    ])
  }
}
</script>

<style lang="scss" scoped>
.dt-cart-item {
  height: 100%;
  overflow: hidden;
}
.dt-cart-item-list {
  height: 100%;
  position: relative;
  z-index: 2;
  // overflow: hidden;
  overflow-x: hidden;
  .test {
    width: 100%;
    height: 85px;
  }
}
.dt-Cart {
  display: flex;
  .van-button--mini {
    padding: 0 10px;
  }
  .van-checkbox {
    padding: 0 5px;
  }
  .van-checkbox__icon {
    height: 2em;
  }
  .van-card {
    padding-left: 5px;
  }
  .delete-prod{
    font-size: 14px;
    color: #f60;
  }
}
.van-submit-bar {
  bottom: 56px;
  z-index: 2;
}
</style>
